
/**
 * 居家页面
 */
//  import { Carousel } from 'antd';
//  import './index.scss';
//  import { useEffect, useState } from 'react';
//  import { Livingdata } from '../../api/living';
//  import { type } from '../../api/living';
//  import { Breadcrumb } from 'antd';
//  import {useLocation} from "react-router-dom"
//  import Category from '../../pages/Category/index'
//  export default (props) => {
//      const location = useLocation()
//      const ruleId = location.search ? location.search.split("=")[1] : "";
//      console.log(ruleId);
//      /**
//       * 存放数据
//       */
//      const [LivingList, setLivingList] = useState([]);       //头部轮播图
//      const [typeList, settypeList] = useState([])             //全部分类数据
//      /**
//       * 请求数据
//       */
//      const gitliving = async () => {
//          try {
//              const data = await Livingdata();
//              setLivingList(data);
//          } catch (error) { }
//      }
//      const gettype = async () => {
//          try {
//              const data = await type()
//              settypeList(data)
//          } catch (error) { }
//      }
//      useEffect(() => {
//          gitliving()
//          gettype()
//      }, [])
//      /**
//       * 引入走马灯
//       */
//      const contentStyle = {
//          height: '500px',
//          color: '#fff',
//          lineHeight: '160px',
//          textAlign: 'center',
//          background: '#364d79',
//      };
 
//      return (
//          <>
//              {/* <Homelayout></Homelayout> */}
//              {/* 面包屑 */}
//              <div className='breadcard'>
//                  <Breadcrumb separator=">">
//                      <Breadcrumb.Item>
//                          <a href="/">首页</a>
//                      </Breadcrumb.Item>
//                      <Breadcrumb.Item>
//                          <a href="">居家</a>
//                      </Breadcrumb.Item>
//                  </Breadcrumb>
//              </div>
//              {/* 轮播图 */}
//              <div className='swiperbox'>
//                  <Carousel autoplay className='swiperimg'>
//                      <div>
//                          <Carousel effect="fade" autoplay dots={false} dotPosition={'bottom'}   >
//                              {
//                                  LivingList.map(item => (
//                                      <div key={item.id}>
//                                          <img key={item.id} src={item.imgUrl} alt="图片错误" />
//                                      </div>
//                                  ))
//                              }
//                          </Carousel>
//                      </div>
//                  </Carousel>
//              </div>
//              {/* 全部分类页面 */}
//              <div className='sub-list'>
//                  <h3>
//                      全部分类
//                  </h3>
//                  <div className='topimg'>
//                      <ul>
//                          <li>
//                              {
//                                  typeList.map(item => (
//                                      <div key={item.id}>
//                                          <img key={item.id} src={item.picture} alt="图片错误" />
 
//                                      </div>
//                                  ))
//                              }
//                          </li>
//                      </ul>
//                  </div>
//              </div>
//              {/* 茶卡酒具页面 */}
//              <div className='tea'>
//                  <div className='teahead'>
//                      <div className='teatextone'>
//                          -茶咖酒具
//                      </div>
//                      <div className='teatexttwo'>
//                           查看全部 &gt;
//                      </div>
//                  </div>
//                  <div className='teatextthree'>
//                          <h2 className='h2'>温暖柔软，品质之选</h2>
//                  </div>
//              </div>
//          </>
//      )
//  }
 
 
import Layout from '../../layouts/HomeLayout'
import { useEffect, useState } from 'react'
import { Carousel,Breadcrumb  } from 'antd'
import { banner, getAll } from '../../api/living'
import { NavLink } from 'react-router-dom'
import Header from '../../layouts/Home/homeTop'
import './index.scss'
import Foot from '../../layouts/Home/footer'
import Home from '../../layouts/Home/index'
export default () => {
    /**
     * 轮播图
     */
    const [bannerList, setBannerList] = useState([])
    /**
     * 获取轮播图
     */
    const getBanner = async () => {
        try {
            const list = await banner()
            setBannerList(list)
        } catch (error) { }
    }
    /**
     * 监听初始化渲染
     */
    useEffect(() => {
        getBanner()
    }, [])
    /**
     * 全部
     */
    const [AllList, setAllList] = useState([])
    /**
     * 获取全部的类
     */
    const getAllList = async () => {
        try {
            const { children } = await getAll()
            setAllList(children)
        } catch (error) { }
    }
    /**
     * 监听初始化渲染
     */
    useEffect(() => {
        getAllList()
    }, [])
    /**
     * 影音娱乐
     */
    return (
        <>
            <Home>
                {/* <Header></Header> */}
                <div className='breadcard'>
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item > 
                        <a href="/"> Home</a>
                    </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="/category">居家</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="banner-box">
                    {
                        bannerList.length ?
                            <Carousel autoplay effect="fade" className='banner'>
                                {
                                    bannerList.map(item => (
                                        <NavLink key={item.id} to={item.hrefUrl}>
                                            <img src={item.imgUrl} alt="" />
                                        </NavLink>
                                    ))
                                }
                            </Carousel>
                            : <div className="banner-holder"></div>
                    }
                </div>
                <div className='all'>
                    <h3>全部分类</h3>
                    <ul>
                        {
                            AllList.map(item => (
                                <li key={item.id}>
                                    <img src={item.picture} alt="" />
                                    <p className='alltext'>{item.name}</p>
                                </li>
                            ))
                        }
                    </ul>
                </div>
                {
                    AllList.map(item => (
                        <>
                            <div className='allboximg'>
                                <div key={item.id}>
                                    <h3>-{item.name}-</h3>
                                    <p>温暖柔软，品质之选</p>
                                    <NavLink to={`/sub/${item.id}`} >
                                        <span>查看全部&gt;</span>
                                    </NavLink>
                                    <ul className='alltexttwo'>
                                        <li>
                                            {
                                                item.goods.map(a => (
                                                    <a key={a.id}>
                                                        <img src={a.picture} alt="" />
                                                        <p>{a.name}</p>
                                                        <p className='desc'>{a.desc}</p>
                                                        <span>￥{a.price}</span>
                                                    </a>
                                                ))
                                            }
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <br />
                        </>
                    ))
                }
            </Home>
            {/* <Foot></Foot> */}
        </>

    )

}
 
